<template>
  <div class="login" :style="loginStyle">
    <el-dialog
      :visible.sync="dialogVisible"
      width="80%"
      center
      :show-close="false">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-carousel :interval="3000" type="card" height="335px" :style="cardStyle">
            <el-carousel-item v-for="item in 6" :key="item">
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="6" :offset="1">
          <h2>让设计变得更简单</h2>
          <el-form label-position="left" label-width="auto" :model="form">
            <el-form-item label="登录">
              <el-input prefix-icon="el-icon-mobile" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" prefix-icon="el-icon-lock" v-model="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input prefix-icon="el-icon-lock" v-model="form.againPassword" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" style="width: 200px;border-radius: 15px">登录</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
        </el-col>
      </el-row>
      <el-container>
        <el-aside style="width: 65%;">
        </el-aside>
        <el-main style="padding: 0;width: 35%;"></el-main>
      </el-container>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'login',
    components: {},
    data () {
      return {
        publicPath: process.env.BASE_URL,
        dialogVisible: true,
        loginStyle: {
          backgroundImage: 'url(' + require('../../public/img/login.jpg') + ')',
          backgroundRepeat: 'no-repeat',
          backgroundSize: 'cover',
          width: '100%',
          height: '100vh',
          margin: '0 auto',
          padding: '0'
        },
        cardStyle: {
          backgroundImage: 'url(' + require('../../public/img/login.jpg') + ')'
        },
        form: {
          name: '',
          password: '',
          againPassword: ''
        }
      }
    },
    created () {
    },
    mounted () {

    },
    watch: {

    },

    methods: {
    }
  }
</script>

<style lang="scss">
  html,body{
    margin: 0;
    padding: 0;
  }
  h2{
    text-align: center;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    text-shadow:0 -3px 2px #777,
    1px -5px 3px #666,
    -1px -6px 5px #555,
    1px -9px 9px #444;
    color: #cba;
  }
  .el-card{
    width: 40%;
    margin: auto;
  }
  .el-dialog__header{
    padding: 0 !important;
  }
  .el-dialog--center .el-dialog__body{
    padding: 0 !important;
  }
  .el-carousel__item:nth-child(2n) {
    background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
  }

  .el-carousel__item:nth-child(2n+1) {
    background-image: url("https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg");
  }
  .el-form-item{
    padding: 5px;
  }
</style>
